<template>
    <el-card shadow="never">
      <el-pagination background layout="prev, pager, next" :total="tonum" @current-change="getData"/>
      <el-container :style="{ height: h + 'px' }">
        <el-aside width="50%" class="border">
          <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="商品名" />
  
            <el-table-column label="分類">
              <template #default="{ row }">
                <span>{{ row.cate.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品圖">
              <template #default="{ row }">
                <el-image
                  class="mr-3 rounded"
                  :src="row.banners[0]"
                  fit="cover"
                  :lazy="true"
                  style="width: 50px; height: 50px"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="商品價格" />
            <el-table-column prop="num" label="商品庫存" />
  
            <el-table-column label="操作" width="300px">
              <template #default="{ row }">
                <el-button
                  size="small"
                  text
                  type="primary"
                  @click="handleCreate(row)"
                  >添加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-aside>
        <el-main>
          <el-table :data="datas" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="商品名" />
  
            <el-table-column label="分類">
              <template #default="{ row }">
                <span>{{ row.cate.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品圖">
              <template #default="{ row }">
                <el-image
                  class="mr-3 rounded"
                  :src="row.banners[0]"
                  fit="cover"
                  :lazy="true"
                  style="width: 50px; height: 50px"
                >
                </el-image>
                
              </template>
            </el-table-column>
            <el-table-column prop="price" label="商品價格" />
            <el-table-column prop="num" label="商品庫存" />
  
            <el-table-column label="操作" width="300px">
              <template #default="{ row }">
                <el-button
                  size="small"
                  text
                  type="primary"
                  @click="handleDelete(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-between">
            <el-button @click="onSubmit" type="primary">確定</el-button>
  
            <el-form-item label="用戶id">
              <el-input v-model="users_id"></el-input>
            </el-form-item>
            <el-form-item label="折扣" @input="hh">
              <el-input v-model="discount"></el-input>
            </el-form-item>
  
            <span class="text-red-300">總價：{{ totalMoney }}</span>
          </div>
        </el-main>
      </el-container>
    </el-card>
  </template>
  
  <script setup>
  import { reactive, ref } from "vue";
  import { getproduct } from "@/api/product.js";
  import { create } from "@/api/order.js";
  import { msg } from "@/composables/util";
//   import { getPrint } from "@/api/order.js";
  const windowHeight = window.innerHeight || document.body.clientHeight;
  const h = windowHeight - 64 - 44 - 40;
  
  const tableData = ref([]);
  const loading = ref(false);
  const tonum=ref(0);
  const curpage=ref(1)
  const getData = (p = null) => {
    if (typeof p == "number") {
      curpage.value = p;
    }
    loading.value = true;
    getproduct(p)
      .then((res) => {
        
        tableData.value = res.data;
        
        tonum.value=res.total
      })
      .finally(() => {
        loading.value = false;
      });
  };
  getData();
  
  const discount = ref(null);
  const totalMoney = ref(null);
  //添加
  const datas = ref([]);
  const users_id = ref(1);
  const handleCreate = (row) => {
    datas.value.push(row);
    let money = datas.value.map((o) => o.price);
  
    // totalMoney.value = eval(money.join("+")) * discount.value * 0.1;
    // if (discount.value.leng) {
    //   alert(111);
    // }
  
    totalMoney.value = eval(money.join("+"));
  };
  
  function hh() {
    let money = datas.value.map((o) => o.price);
    totalMoney.value = eval(money.join("+"));
  
    totalMoney.value = totalMoney.value * discount.value * 0.1;
  }
  
  //删除
  const handleDelete = (row) => {
    let number = datas.value.indexOf(row);
    
    if (number !== "-1") {
      datas.value.splice(number, 1);
    }
  };
  
  var total;
  const onSubmit = () => {
    datas.value.map((o) => {
      o.total = totalMoney.value;
      o.users_id=users_id.value
      
      return o
    });
    create(datas.value).then((res) => {
      msg("成功");
      location.reload();
    });
  };
  
  const printReceipt = () => {
    // getPrint().then((res) => {
    //   msg("小票打印成功");
    // });
  };
  </script>
  